<template>
  <div class="p-2">
    <el-card class="p-2" shadow="never">
      <div class="menu-top">
        <div>
          <el-button type="primary" :loading="buttonLoading" @click="submitForm">保存</el-button>
          <el-button type="success">复制</el-button>
          <el-button type="danger" @click="handleClose">关闭</el-button>
        </div>
      </div>
      <div style="border-bottom: 1px solid #eee; margin: 20px -15px" />
      <div>
        <el-form ref="productsFormRef" :model="pd.form" :rules="pd.rules" label-width="120px">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="商品名称" prop="name">
                <el-input v-model="pd.form.name" placeholder="请输入商品名称" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属仓库" prop="warehouseId">
                <el-input v-model="pd.form.warehouseId" placeholder="请输入所属仓库" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="默认单价" prop="price">
                <el-input v-model="pd.form.price" placeholder="请输入默认单价" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="库存数量" prop="stock">
                <el-input v-model="pd.form.stock" placeholder="请输入库存数量" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="最新进价" prop="newPrice">
                <el-input v-model="pd.form.newPrice" placeholder="请输入最新进价" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="库存价" prop="oldPrice">
                <el-input v-model="pd.form.oldPrice" placeholder="请输入库存价" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="库存价" prop="oldPrice">
                <el-input v-model="pd.form.oldPrice" placeholder="请输入库存价" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="单位" prop="unitId">
                <el-select v-model="pd.form.unitId" placeholder="请选择">
                  <el-option v-for="item in erpUnitList" :key="item.id" :value="item.id" :label="item.name"> </el-option>
                  <div style="position: absolute; left: 0; bottom: 0; width: 100%">
                    <el-button link style="width: 100%" type="primary" @click="addUnit">新增</el-button>
                    <!--                    <el-option style="align-items: center" label="新增" value="new" @click="addUnit"> </el-option>-->
                  </div>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商品分类" prop="cateId">
                <el-tree-select
                  v-model="pd.form.cateId"
                  :data="assetCategoryOptions"
                  :props="{ value: 'id', label: 'name', children: 'children' }"
                  value-key="id"
                  check-strictly
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="产品状态" prop="status">
                <el-select v-model="pd.form.status" placeholder="请选择产品状态">
                  <el-option v-for="dict in sys_show_hide" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="排序" prop="sort">
                <el-input v-model="pd.form.sort" placeholder="请输入排序" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <div style="padding-bottom: 10px; font-size: 14px">价格策略</div>
            </el-col>
            <el-col :span="24">
              <div style="width: 100%; border: 1px solid #eee">
                <el-row :gutter="20" style="padding: 20px 20px 0 20px">
                  <el-col :span="8">
                    <el-form-item label="零售客户" prop="sort">
                      <el-input disabled />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="批发客户" prop="sort">
                      <el-input disabled />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="VIP客户" prop="sort">
                      <el-input disabled />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="最低售价" prop="sort">
                      <el-input disabled />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="预计采购价" prop="sort">
                      <el-input disabled />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="最高采购价" prop="sort">
                      <el-input disabled />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="24" style="padding-top: 10px">
              <el-form-item prop="inventoryWarning">
                <el-checkbox v-model="pd.form.inventoryWarning" label="库存预警" />
              </el-form-item>
            </el-col>
            <el-col :span="24" style="padding-top: 10px">
              <el-form-item label="上传图片" prop="imgOssId">
                <image-upload v-model="pd.form.imgOssId" @input="getImgUrl" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="pd.form.remark" type="textarea" rows="3" placeholder="请输入描述" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
  </div>
  <erp-unit-dialog v-model="dialog.visible" :dialog="dialog" />
</template>

<script setup lang="ts">
import { listAssetCategory } from '@/api/erp/assetCategory';
import { ProductsForm } from '@/api/erp/products/types';
import { addProducts, updateProducts } from '@/api/erp/products';
import { listErpUnit } from '@/api/erp/erpUnit';
import ErpUnitDialog from '@/views/erp/erpUnit/ErpUnitDialog.vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const emit = defineEmits(['closeAdd', 'getList']);
const assetCategoryOptions = ref<AssetCategoryOption[]>([]);
const { sys_show_hide } = toRefs<any>(proxy?.useDict('sys_show_hide'));
const productsFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});
type AssetCategoryOption = {
  id: number;
  name: string;
  children?: AssetCategoryOption[];
};

const props = defineProps({
  rowData: {
    type: Object,
    default: null
  }
})
const chickenFeedOutFormRef = ref<ElFormInstance>();
const buttonLoading = ref(false);
const initFormData: ProductsForm = {
  id: undefined,
  name: undefined,
  price: undefined,
  stock: undefined,
  newPrice: undefined,
  oldPrice: undefined,
  unitId: undefined,
  cateId: undefined,
  remark: undefined,
  status: undefined,
  sort: undefined,
  warehouseId: undefined,
  imgUrl: undefined,
  imgOssId: undefined,
  inventoryWarning: undefined
};
const pd = reactive<any>({
  form: { ...initFormData },
  rules: {
    id: [{ required: true, message: 'ID不能为空', trigger: 'blur' }],
    name: [{ required: true, message: '商品名称不能为空', trigger: 'blur' }],
    unitId: [{ required: true, message: '单位不能为空', trigger: 'blur' }],
    cateId: [{ required: true, message: '商品分类不能为空', trigger: 'blur' }]
  }
});
watch(
  () => props.rowData,
  () => {
    console.log(props.rowData);
    pd.form = props.rowData;
  }
);
/*新增计量单位*/
const addUnit = () => {
  dialog.visible = true;
  dialog.title = '添加计量单位';
};
/*获取资产类别*/
/** 查询资产分类下拉树结构 */
const getTreeSelect = async () => {
  const res = await listAssetCategory();
  assetCategoryOptions.value = [];
  const data: AssetCategoryOption = { id: 0, name: '顶级节点', children: [] };
  data.children = proxy?.handleTree<AssetCategoryOption>(res.data, 'id', 'parentId');
  assetCategoryOptions.value.push(data);
};
/** 查询计量单位列表 */
const erpUnitList = ref([]);
const getUnitList = async () => {
  const res = await listErpUnit();
  erpUnitList.value = res.rows;
};

/*图片回传值*/
const getImgUrl = (e: string) => {
  pd.form.imgUrl = e;
};
/*关闭新增界面*/
const handleClose = () => {
  emit('closeAdd', 1);
};
/** 表单重置 */
const reset = () => {
  pd.form.value = { ...initFormData };
  chickenFeedOutFormRef.value?.resetFields();
};
/** 提交按钮 */
const submitForm = () => {
  productsFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      console.log(pd.form);
      buttonLoading.value = true;
      if (pd.form.id) {
        await updateProducts(pd.form).finally(() => (buttonLoading.value = false));
      } else {
        await addProducts(pd.form).finally(() => (buttonLoading.value = false));
      }
      proxy?.$modal.msgSuccess('操作成功');
      handleClose();
      emit('getList');
      reset();
    }
  });
};
onMounted(() => {
  getTreeSelect();
  getUnitList();
});
</script>

<style scoped lang="scss">
.menu-top {
  display: flex;
  justify-content: space-between;

  .el-form-item {
    margin-bottom: 0;
  }
}

.button-add {
  color: #3a8ee6;
  font-size: 14px;
}

.button-del {
  color: red;
  font-size: 14px;
}

.xh-show {
  display: block;
}

.operation_show {
  display: none;
}

.el-table__body tr:hover > td .operation_show {
  display: block;
}

.el-table__body tr:hover > td .xh-show {
  display: none;
}
</style>
